<template>
  <view>
    <navigation-bar :title-text="indexTitle" background="#ffffff"></navigation-bar>
    <view v-if="isReady" class="container"
      :style="'padding-top:' + (navigationBarHeight) + 'px; ' + (!notSwitchTab?'':'padding-bottom:0') + ';'">
      <home v-if="method.isCurrentTab(currentTab, 'home')" :userid="userId" :userInfo="userInfo" ref="Home" :notSwitchTab="notSwitchTab"
        @stopShow="stopShow" @stopuserid="stopuserid"></home>
      <me v-if="method.isCurrentTab(currentTab, 'me')" ref="Me"></me>
      <mall v-if="method.isCurrentTab(currentTab, 'mall')"></mall>
      <shopCar v-if="method.isCurrentTab(currentTab, 'shopCar')" @shopCarChange="shopCarChange"
        :navigationBarHeight="navigationBarHeight"></shopCar>
      <integral v-if="method.isCurrentTab(currentTab, 'integral')"></integral>
      <live v-if="method.isCurrentTab(currentTab, 'live')"></live>
      <chain v-if="method.isCurrentTab(currentTab, 'chain')"></chain>
    </view>
    <view v-if="showType">
      <b-tab-bar :currentTab="currentTab" :isReady="isReady && !guideVisible" :tabBar="tabBar" :shopCarNum="shopCarNum"
        shopCarType="1" :centerTabbarItem="centerTabbarItem" v-if="tabVisible && !guideVisible"
        @AssembleReload="AssembleReload" ref="tab_bar"></b-tab-bar>
    </view>
    <!-- <van-dialog id="van-dialog"></van-dialog> -->
    <!-- <van-toast id="van-toast"></van-toast> -->
    <loading v-if="!isReady"></loading>
    <guide v-if="guideVisible" :guideList="guideList"></guide>
  </view>
</template>

<script module="method" lang="wxs" src="./index.wxs"></script>

<script lang="ts">
  import {
    Component,
    Vue
  } from "vue-property-decorator";
  import chain from "./modules/chain/chain.vue";
  import navigationBar from "@/components/navigation-bar/navigation-bar.vue";
  import BTabBar from "@/components/b-tab-bar/index.vue";
  import loading from "@/components/loading/index.vue";
  import guide from "@/components/guide/guide.vue";
  import home from "./modules/home/home.vue";
  import mall from "./modules/mall/mall.vue";
  import me from "./modules/me/me.vue"
  import MIcon from "@/components/m-icon/m-icon.vue";
  import shopCar from "./modules/shopCar/shopCar.vue";
  import integral from "./modules/integral/integral.vue";
  import live from "./modules/live/live.vue";


  // import "./index.scss"
  @Component({
    components: {
      chain,
      navigationBar,
      BTabBar,
      loading,
      guide,
      home,
      mall,
      MIcon,
      shopCar,
      integral,
      live,
      me,
    }
  })
  export default class Index extends Vue {
    get currentTab() {
      return this.$store.state.settingStore.currentTab
    }

    get tabVisible() {
      return this.$store.state.settingStore.tabVisible
    }

    get isReady() {
      return this.$store.state.settingStore.isReady || false
    }

    get tabBar() {
      return this.$store.state.settingStore.tabBar
    }

    get centerTabbarItem() {
      return this.$store.state.settingStore.centerTabbarItem
    }

    get userInfo() {
      return this.$store.state.userStore.userInfo
    }

    get searchName() {
      return this.$store.state.settingStore.searchName
    }

    get notSwitchTab() {
      return this.$store.state.settingStore.notSwitchTab
    }

    get guideVisible() {
      return this.$store.state.settingStore.guideVisible
    }

    get shopCarNum() {
      return this.$store.state.userStore.goodsNumber
    }

    get guideList() {
      return this.$store.state.settingStore.guideList
    }

    get indexTitle() {
      return this.$store.state.settingStore.indexTitle
    }

    get navigationBarHeight() {
      return this.$store.state.settingStore.navigationBarHeight
    }

    isFlase: boolean = false
    showType: boolean = true
    Homes: any
    tab_Bar: any
    Me: any
    userId:any=""

    stopShow(e) {
      this.showType = Boolean(e.type)
      this.AssembleReload();
    }
    stopuserid(){
      this.userId=""
    }
    onLoad({
      page,userId
    }) {
      try {
        if(userId){
          this.userId=userId;  
        }
        if (!this.$store.state.settingStore.isReSet&&page) {
          this.$store.commit("settingStore/setCurrentTab", page);
        }
        this.$store.commit("settingStore/setSwitchTab", 0); // 小程序重新载入
        
      } catch (err) {
        this.$Popup.toast("首页解析失败");
      }
    }
    

    AssembleReload() {
      this.Homes = this.$refs.Home;
      // this.Homes.reGetPageAssembly();
    }

    clickTap() {
      // 当底部导航有多个自定义页面 解决页面内容无法切换问题
      this.Homes = this.$refs.Home;
      if (this.Homes) {
        this.AssembleReload();
      }
    }

    /** 向下调用 */
    resetAssInfo() {
      this.Homes = this.$refs.Home;
      if (this.Homes) {
        this.Homes.resetInfo();
      }
    }

    onShareAppMessage() {
        return {
          title: this.$store.state.shopset.shopInfo.shopName,
          path: `/pages/index/index?page=home`,
        };
    }

    onShareTimeline() {
        return {
          title: this.$store.state.shopset.shopInfo.shopName,
          path: `/pages/index/index?page=home`,
        };
    }

    onReachBottom() {
      this.$Pubsub.emit("onReachBottom");
    }

    async onShow() {
      this.$Pubsub.on("onTap", () => {
        this.Homes = this.$refs.Home;
        this.tab_Bar = this.$refs.tab_bar;
        if (this.Homes) {
          this.AssembleReload();
        }
      });
      /** 有切换自定义页面后 重新获取首页内容  */
      this.Homes = this.$refs.Home;
      this.Me = this.$refs.Me
      if (this.Homes) {
        // const id = this.$store.state.settingStore.newCurrentPageId;
        const homepage = this.$store.state.settingStore.pageList.filter((item: { isDef: string; }) => {
        return item.isDef === "1";
      });
        // console.log("2222222222222222222222222222",this.$store.state.settingStore.pageList);
        
        this.Homes.reGetPageAssembly(homepage[0].id);
      }
      if (this.Me) {
        // const id = this.store.settingStore.pageList[0].id;
        this.Me.getData()
      }
      this.$Pubsub.emit("onShow");
      this.resetAssInfo();
      // 购物车规格弹窗锁屏后的判断 一次性判断页面显示有问题 拆分开判断 TODO
      if (
        this.$store.state.settingStore.formShopCar &&
        this.$store.state.settingStore.currentTab === "shopCar"
      ) {
        this.$store.commit("settingStore/setTabVisible", false);
      } else {
        this.$store.commit("settingStore/setTabVisible", true);
      }

      // if (this.store.settingStore.isReady) {
      //   // 获取店铺设置
      //   this.store.settingStore.getSetting().then(res => {
      //     this.store.message.getTemplates(res);
      //   });
      // }
    }

    /**
     * 回退按钮
     */
    onBack() {
      const historyPage = this.$store.state.settingStore.historyPage;
      const setSettingStore = (
        currentTab,
        currentPageId,
        itemLink,
        indexTitle,
      ) => {
        this.$store.commit("settingStore/setCurrentTab", currentTab);
        this.$store.commit("settingStore/setCurrentPageId", currentPageId);
        this.$store.commit("settingStore/setIndexTitle", indexTitle);
        this.$store.commit("settingStore/setShowTabBar", itemLink);
      };

      this.$store.commit("settingStore/setHistoryPage", historyPage.splice(
        historyPage.length - 1,
        1,
      ));

      const {
        length
      } = historyPage;

      if (length) {
        const itemLink: any = historyPage[historyPage.length - 1];
        const title = `${itemLink.name ? itemLink.name : ""}`;
        setSettingStore("home", itemLink.id, itemLink, title);
        uni.setNavigationBarTitle({
          title,
        });
      } else {
        const {
          homeTab
        } = this.$store.state.settingStore;

        this.$store.commit("settingStore/setHistoryPage", []);
        setSettingStore("home", homeTab.id, homeTab, "首页");
        homeTab.append = homeTab.name;
        homeTab.url = homeTab.linkUrl;
        uni.setNavigationBarTitle({
          title: `${this.$store.state.settingStore.customName}`,
        });
      }
      this.$Pubsub.emit("onTap");
    }


    /** 派发滚动事件 */
    // onPageScroll=
    //   this.$global.debounced(e=>{this.$Pubsub.emit("onPageScroll", e)}, 50);

    onPageScroll(e) {
      this.Homes = this.$refs.Home
      if(this.Homes){
        
      this.Homes.PageScroll(e)
      }
    }

    async shopCarChange() {
      await this.$store.dispatch("userStore/getShopCarNum");
    }

  }
</script>

<style lang="scss" scoped>
  .container {
    padding-bottom: calc(88rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(88rpx + env(safe-area-inset-bottom));
    // padding-bottom: 50px;
  }

  .choiceShop2 {
    position: fixed;
    bottom: 300rpx;
    right: 40rpx;
    width: 90rpx;
    height: 90rpx;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    flex-wrap: wrap;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 100rpx;
    color: white;
    z-index: 10;

    .choiceWrap {
      width: 50rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: center;
    }

    .ft {
      font-size: 20rpx;
      margin-top: -6rpx;
    }
  }
</style>